<template>
  <div id="index" ref="appRef">
    <div class="bg">
      <dv-loading v-if="loading">Loading...</dv-loading>
      <div v-else class="host-body">
        <div class="jc-center">
          <div class="topBox">
            <span class="title-text">"集智汇美&nbsp;&nbsp;梦想起航"&nbsp;&nbsp;&nbsp;集美区毕业生供需对接云平台</span>
          </div>
        </div>


        <!-- 第三行数据 -->
        <div class="thirdMainBox">
          <div class="leftMainBox">
            <mainLeftFather></mainLeftFather>
          </div>
          <div class="centerMainBox">
            <mainCenterFather></mainCenterFather>
          </div>
          <div class="rightMainBox">
            <mainRightFather></mainRightFather>
          </div>
        </div>

        <!--第四行数据-->
        <div class="fouthBottomBox">
          <bottom-left></bottom-left>
          <bottom-center></bottom-center>
          <bottom-right></bottom-right>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import drawMixin from "../utils/drawMixin";
import mainLeftFather from "../components/echart/mainLeft/mainLeftFather.vue";
import mainCenterFather from "../components/echart/mainCenter/mainCenterFather.vue";
import mainRightFather from "../components/echart/mainRight/mainRightFather.vue";
import bottomLeft from "../components/echart/bottomLeft/bottomLeft.vue";
import bottomCenter from "../components/echart/bottomCenter/bottomCenter.vue";
import bottomRight from "../components/echart/bottomRight/bottomRight.vue";
import { getParkMonitor } from "../../src/api/getParkMonitor/getParkMonitor.js";

export default {
  mixins: [drawMixin],
  data() {
    return {
      fkPlatTenantId: "ff8080817b7c8ff6017b7ca9a1d900d6",
      loading: true,
      config1: {
        number: [0],
        content: "{nt}",
      },
      config2: {
        number: [0],
        content: "{nt}",
      },
    };
  },
  components: {
    mainLeftFather,
    mainCenterFather,
    mainRightFather,
    bottomLeft,
    bottomCenter,
    bottomRight,
  },
  mounted() {
    this.cancelLoading();
  },
  created() {
    this.getParkMonitorList();
  },
  methods: {
    cancelLoading() {
      setTimeout(() => {
        this.loading = false;
      }, 500);
    },
    async getParkMonitorList() {
      const res = await getParkMonitor(this.fkPlatTenantId);
      console.log("总进出场数", res.data.recordNums);
      const totalInNums =
        res.data.recordNums.totalInNums == null
          ? 0
          : res.data.recordNums.totalInNums;
      const totalOutNums =
        res.data.recordNums.totalOutNums == null
          ? 0
          : res.data.recordNums.totalOutNums;
      this.$set(this.config1, "number", [Number(totalInNums)]);
      this.config1 = { ...this.config1 };
      this.$set(this.config2, "number", [Number(totalOutNums)]);
      this.config2 = { ...this.config2 };
    },
  },
};
</script>

<style lang="scss" scoped>
@import "../assets/scss/index.scss";
</style>
